<template>

    <div class="col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:pr-8 lg:pb-8 mt-6 lg:mt-0">
        <router-link :to="tool.route" v-tooltip.top="{ value: tool.description, autoHide: false }">
            <div :style="`height: 160px; padding: 2px; border-radius: 10px; background: ${tool.background}`">
                <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                    <div :class="`flex items-center justify-center mb-4 ${tool.iconBackground}`"
                        style="width: 3.5rem; height: 3.5rem; border-radius: 10px;">
                        <i :class="`${tool.icon} !text-2xl ${tool.iconColor}`"></i>
                    </div>
                    <h5 class="mb-2 text-surface-900 dark:text-surface-0">{{ tool.title }}</h5>
                    <span class="text-surface-600 dark:text-surface-200">{{ tool.description.slice(0, 40) }}...</span>
                </div>
            </div>
        </router-link>
    </div>

</template>

<script setup>
const props = defineProps({
    tool: {
        type: Object,
        required: true,
        default: () => ({
            route: '/',
            title: '工具名称',
            description: '工具描述',
            icon: 'pi pi-fw pi-home',
            iconBackground: 'var(--primary-color)',
            iconColor: 'var(--primary-color-text)',
            background: 'linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))'
        })
    }
});
</script>